<template>
    <div class="app-container">
        <header-title/>
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="85px"
        >
            <el-form-item label="卡号" prop="keyword">
                <el-input
                    v-model="queryParams.keyword"
                    placeholder="请输入卡号/手机号/用户昵称"
                    clearable
                    style="width: 260px;"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="是否使用" prop="isUse">
                <el-select v-model="queryParams.isUse" placeholder="是否使用" clearable>
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="0" label="否"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="卡算力" prop="cardPoint">
                <el-input
                    v-model="queryParams.cardPoint"
                    placeholder="请输入卡算力"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="卡面值" prop="cardAmonut">
                <el-input
                    v-model="queryParams.cardAmonut"
                    placeholder="请输入卡面值"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="渠道来源" prop="userChannel">
                <el-select v-model="queryParams.userChannel" filterable clearable>
                    <el-option
                        v-for="dict in dict.type.user_channel"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="jiTime">
                <el-date-picker
                    v-model="dateRange"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @keyup.enter.native="handleQuery"
                    placeholder="选择时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="到期时间" prop="jiTime">
                <el-date-picker
                    v-model="dateRangeTwo"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @keyup.enter.native="handleQuery"
                    placeholder="选择时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item class="mar-r-20">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery"
                >搜索</el-button
                >
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="onHandleAdd">新增卡密</el-button>
                
            </el-form-item>
        </el-form>
        <div style="margin-bottom: 19px;">
            <el-button
            type="primary"
            plain
            icon="el-icon-download"
            @click="handleExport"
            >导出算力兑换卡</el-button>
            <el-button
            type="primary"
            plain
            icon="el-icon-download"
            @click="getExportList"
            >查看导出任务</el-button>
        </div>
        <el-table
            v-loading="loading"
            :data="tableList"
            @selection-change="handleSelectionChange"
        >   
            <el-table-column  type="selection" width="50" align="center"/>
            <el-table-column label="兑换码" min-width="140" >
                <template slot-scope="scope">
                    {{ scope.row.cardNumber || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="用户渠道 " width="110">
                <template slot-scope="scope">
                    {{selectDictLabel(dict.type.user_channel,scope.row.userChannel) || '-'}}
                </template>
            </el-table-column>
            <el-table-column label="卡面值 " >
                <template slot-scope="scope">
                    {{ scope.row.cardAmonut || '-' }}元
                </template>
            </el-table-column>
            <el-table-column label="卡算力 " >
                <template slot-scope="scope">
                    {{ scope.row.cardPoint || '-' }}点数
                </template>
            </el-table-column>
            <el-table-column label="使用信息" min-width="160" >
                <template slot-scope="scope">
                    <el-tag size="small" type="fail" v-if="scope.row.isUse == 0">未使用</el-tag>
                    <el-tag size="small" type="success" v-if="scope.row.isUse == 1">已使用</el-tag>
                    <div v-if="scope.row.isUse == 1">使用时间：{{scope.row.useTime || '-'}}</div>
                    <div v-if="scope.row.isUse == 1">使用用户ID：{{scope.row.useUserId || '-'}}</div>
                    
                </template>
            </el-table-column>
            <el-table-column label="到期时间" min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.expireTime || '-' }}
                </template>
            </el-table-column>
           
            <el-table-column label="创建时间" min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.createTime || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-search"
                        @click="handleUpdateDetail(scope.row)"
                    >详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        >
        </pagination>
        <el-dialog :title=" type =='detail' ?'详情' :'新增卡密' " :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="type == 'detail' ? true : false">
                <el-row :gutter="20">
                    <el-col :span="24" v-if="type == 'detail'">
                        <el-form-item  label="卡号 ">
                            {{ form.cardNumber }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="用户渠道来源 " prop="userChannel">
                            <el-select clearable v-model="form.userChannel" placeholder="请选择用户渠道来源" style="width:100%">
                                <el-option v-for="dict in dict.type.user_channel" :key="dict.value" :value="dict.value" :label="dict.label">{{dict.label}}</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="卡面值 " prop="cardAmonut">
                            <el-input  v-model="form.cardAmonut" placeholder="请输入卡面值"  >
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="卡算力 " prop="cardPoint">
                            <el-input  v-model="form.cardPoint" placeholder="请输入卡算力"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="到期时间" prop="expireTime">
                            <el-date-picker
                                v-model="form.expireTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择到期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="数量" prop="nums">
                            <el-input  v-model="form.nums" type="number" placeholder="请输入生成数量"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <template  v-if="type == 'detail'">
                        <el-col :span="24">
                            <el-form-item  label="是否使用">
                                {{ form.isUse == 0 ?'未使用' : '已使用' }}
                            </el-form-item>
                        </el-col>
                        <template v-if="form.isUse == 1">
                            <el-col :span="12" v-if=" form.useUserInfo">
                                <el-form-item  label="用户手机号">
                                    {{ form.useUserInfo.phonenumber || '-' }}
                                </el-form-item>
                            </el-col>
                             <el-col :span="12" v-if=" form.useUserInfo">
                                <el-form-item  label="用户昵称">
                                    {{ form.useUserInfo.nickName || '-' }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="使用用户ID">
                                    {{ form.useUserId || '-' }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="使用时间">
                                    {{ form.useTime || '-'}}
                                </el-form-item>
                            </el-col>
                        </template>
                        
                    </template>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer"  v-if="type == 'add'">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="导出已生成列表" :visible.sync="isShow" width="70%" append-to-body>
            <el-form
                :model="exportParams"
                ref="queryExportForm"
                :inline="true"
                label-width="85px"
            >
                <el-form-item label="关键字" prop="keyword">
                    <el-input
                        v-model="exportParams.keyword"
                        placeholder="请输入关键字"
                        clearable
                        size="mini"
                    />
                </el-form-item>
                <el-form-item label="任务时间" >
                    <el-date-picker
                        v-model="dateRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        size="mini"
                        placeholder="选择任务时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="导出时间">
                    <el-date-picker
                        v-model="dateRangeTwo"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        size="mini"
                        placeholder="选择导出时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="mar-r-20">
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="getExportList"
                    >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="mini" @click="resetExoprtQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="exportLoading"
                :data="exportList"
            >   
                <el-table-column label="文件名" width="300">
                    <template slot-scope="scope">
                        {{ scope.row.fileName || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="提交时间" >
                    <template slot-scope="scope">
                        {{ scope.row.taskTime || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="导出时间" >
                    <template slot-scope="scope">
                        {{ scope.row.exportTime || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                         <el-button
                        size="mini"
                        type="text"
                        @click="downLoadUrl(scope.row.fileUrl)"
                    >下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                :total="exportTotal"
                :page.sync="exportParams.pageNum"
                :limit.sync="exportParams.pageSize"
                @pagination="getExportList"
            >
            </pagination>
        </el-dialog>
    </div>
</template>
<script>
    import {listPointgiftCard,addPointgiftCard,detailByCardNumber,exportPointGiftCard,listExportFile} from '@/api/computeOrderManage/pointGift'
    export default{
        name:'PointGift',
        dicts:['user_channel'],
        data() {
            return {
                open: false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    cardAmonut:'',
                    cardPoint:'',
                    endTime:'',
                    expireEndTime:'',
                    expireStartTime:'',
                    isUse:'',
                    keyword:'',
                    startTime:'',
                    pointGiftCardIds:[]
                   
                },
                showSearch: true,
                total: 0,
                dateRange: [],
                dateRangeTwo:[],
                // 表格数据
                tableList: [],
                loading: false,
                form: {},
                rules: {
                    cardAmonut: [
                        { required: true, message: "卡面值不能为空", trigger: "blur" }
                    ],
                    cardPoint: [
                        { required: true, message: "卡算力不能为空", trigger: "blur" }
                    ],
                    userChannel: [
                        { required: true, message: "渠道来源不能为空", trigger: "blur" }
                    ],
                    nums: [
                        { required: true, message: "数量不能为空", trigger: "blur" }
                    ]
                },
                type: '',
                exportParams: {
                    keyword:"",
                    pageSize: 10,
                    pageNum: 1,
                    type: 1
                },
                dateRange:[],
                dateRangeTwo: [],
                exportTotal: 0,
                exportList: [],
                exportLoading: true,
                isShow: false
            }
        },
        created() {
            this.getList()
        },
        methods: {
            downLoadUrl(url) {
                window.open(url)
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                console.log(selection,'sel')
                this.queryParams.pointGiftCardIds = selection.map(item => item.pointGiftCardId)
            },
            getExportList() {
                if (this.dateRange && this.dateRange.length) {
                    this.exportParams.taskTimeStart = this.dateRange[0];
                    this.exportParams.taskTimeEnd = this.dateRange[1];
                } else {
                    this.exportParams.taskTimeStart = undefined;
                    this.exportParams.taskTimeEnd = undefined;
                }
                if (this.dateRangeTwo && this.dateRangeTwo.length) {
                    this.exportParams.exportTimeStart = this.dateRange[0];
                    this.exportParams.exportTimeEnd = this.dateRange[1];
                } else {
                    this.exportParams.exportTimeStart = undefined;
                    this.exportParams.exportTimeEnd = undefined;
                }
                this.exportLoading = true
                listExportFile(this.exportParams).then(response=> {
                    this.exportList = response.data.records;
                    this.exportTotal = response.data.total;
                    this.exportLoading = false;
                    this.isShow = true
                })
            },
            handleExport() {
                // exportPointGiftCard()
                if(this.queryParams.pointGiftCardIds.length <= 0) {
                    this.$modal.msgError('请先选择导出数据')
                    return;
                }
                let jsons = JSON.parse(JSON.stringify(this.queryParams))
                jsons.pointGiftCardIds = jsons.pointGiftCardIds.toString()
                exportPointGiftCard(jsons).then(res=> {
                    this.$modal.msgSuccess("导出数据生成中...")

                })
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                       
                        addPointgiftCard(this.form).then(res=> {
                            this.$modal.msgSuccess(res.msg)
                            this.open = false
                            this.getList()
                        })
                    }
                })
            },
            handleUpdateDetail(row) {
                this.type='detail'
                detailByCardNumber({cardNumber: row.cardNumber}).then(res=> {
                    this.form = res.data
                    this.open = true
                })
            },
            onHandleAdd() {
                this.type = 'add'
                this.form = {
                    cardAmonut: '',
                    cardPoint:'',
                    expireTime:'',
                    userChannel: '',
                    nums: 1
                }
                this.open = true
            },
             /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            resetExoprtQuery() {
                this.dateRange = [];
                this.dateRangeTwo = []
                this.resetForm("queryExportForm");
                this.getExportList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.dateRangeTwo = []
                this.resetForm("queryForm");
                this.handleQuery();
            },
            getList() {
                this.loading = true;
                if (this.dateRange && this.dateRange.length) {
                    this.queryParams.startTime = this.dateRange[0];
                    this.queryParams.endTime = this.dateRange[1];
                } else {
                    this.queryParams.startTime = undefined;
                    this.queryParams.endTime = undefined;
                }
                if (this.dateRangeTwo && this.dateRangeTwo.length) {
                    this.queryParams.expireStartTime = this.dateRangeTwo[0];
                    this.queryParams.expireEndTime = this.dateRangeTwo[1];
                } else {
                    this.queryParams.expireStartTime = undefined;
                    this.queryParams.expireEndTime = undefined;
                }
                
                listPointgiftCard(this.queryParams).then((response) => {
                    this.tableList = response.data.records;
                    this.total = response.data.total;
                    this.loading = false;
                });
            }
        }
    }
</script>